<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 头部布局 -->
        <el-row>
          <el-col>
            <el-button
              v-if="assignPerm('add-but')"
              type="primary"
              @click="add('')"
              >添加经纪</el-button
            >
          </el-col>
          <el-col>
            <div>
              <el-input
                v-model="search"
                placeholder="请输入内容"
                @keyup.enter.native="searchFn"
                @input="closeFn"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="searchFn"
                />
              </el-input>
            </div>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="removeFn">重置</el-button>
          </el-col>
        </el-row>
        <el-table
          :key="item"
          max-height="600"
          highlight-current-row
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column label="图片" width="180">
            <template slot-scope="scope">
              <el-image :src="scope.row.image" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="180" />
          <el-table-column prop="email" label="邮箱" width="180" />
          <el-table-column prop="phone" label="电话" width="180" />
          <el-table-column prop="address" label="地址" width="180" />
          <el-table-column prop="desc" label="介绍" />
          <el-table-column v-slot="{ row }" width="180">
            <el-button
              v-if="assignPerm('edit-but')"
              type="primary"
              @click="add(row.id)"
              >编辑</el-button
            >
            <el-button
              v-if="assignPerm('dele-but')"
              type="danger"
              @click="deleteFn(row.id)"
              >删除</el-button
            >
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            :current-page="limit"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <MessageBox
        ref="manager"
        :dialog-form-visible.sync="dialogFormVisible"
        @finish="finish"
      />
    </div>
  </div>
</template>
<script>
import { managerList, deletemanager, numberManager } from "@/api/manager";
import MessageBox from "@/views/manager/components/MessageBox.vue";
export default {
  components: {
    MessageBox,
  },
  data() {
    return {
      tableData: [],
      dialogFormVisible: false,
      item: "",
      search: "", // 搜索绑定
      limit: 1, // 默认显示第几页
      size: 10, // 数据每页显示条数
      total: 0, // 数据总条数
    };
  },
  created() {
    this.updateList();
    this.allUser();
  },
  methods: {
    removeFn() {
      this.search = "";
      this.updateList();
      this.allUser();
    },
    closeFn() {
      if (!this.search) {
        this.updateList();
        this.allUser();
        this.limit = 1;
      }
    },
    // 每页显示多少条数据
    handleSizeChange(value) {
      this.size = value;
      this.updateList();
    },
    // 第几页数据
    handleCurrentChange(value) {
      this.limit = value;
      this.updateList();
    },
    // 搜索
    async searchFn() {
      this.tableData = await managerList({ name_contains: this.search });
      this.total = await numberManager({ name_contains: this.search });
    },
    add(id) {
      this.dialogFormVisible = true;
      this.$refs.manager.editmanager(id);
    },
    finish() {
      this.updateList();
      this.allUser();
    },
    // 获取指定经纪数量
    async allUser() {
      this.total = await numberManager({ name_contains: this.search });
    },

    // 获取数据列表 渲染页面
    async updateList() {
      this.tableData = await managerList({
        _limit: this.size,
        _start: (this.limit - 1) * this.size,
        name_contains: this.search,
      });
      this.item = Math.random();
    },
    // 删除经纪
    deleteFn(id) {
      this.$confirm("是否执行删除操作, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deletemanager(id);
          this.$message.success("删除成功");
          if (
            this.total !== 1 &&
            this.total - (this.limit - 1) * this.size === 1
          ) {
            this.limit--;
          } else if (this.total === 1) {
            this.limit = 1;
          }
          this.updateList();
          this.allUser();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss">
.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
// x轴滚定条样式
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  height: 50px;
  background: #c1c1c1;
}
// x轴滚定条样式
// .el-table__body-wrapper::-webkit-scrollbar-track {
//   box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
//   border-radius: 2px;
//   background: rgba(0, 0, 0, 0.4);
// }
</style>
<style lang='scss' scoped>
.el-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.el-image {
  width: 150px;
  height: 120px;
}
</style>
